@use 'var.scss' as var;

@mixin utils-clearfix {
  &::before,
  &::after {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }
}

@mixin utils-shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

@mixin utils-shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

@mixin utils-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@mixin utils-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@mixin utils-shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@mixin utils-shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@mixin opacity {
  @for $i from 0 through 100 {
    .#{var.$prefix}opacity-#{$i} {
      opacity: $i * 0.01;
    }
  }
}

.c-clearfix {
  @include utils-clearfix;
}

.c-shadow-sm {
  @include utils-shadow-sm;
}

.c-shadow {
  @include utils-shadow;
}

.c-shadow-lg {
  @include utils-shadow-lg;
}

.c-shadow-xl {
  @include utils-shadow-xl;
}

.c-shadow-2xl {
  @include utils-shadow-2xl;
}